


<extend name="Public:layout"/>
<block name="content">
<style type="text/css">

    .er{color:red;}
</style>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__editor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__editor/ueditor.all.min.js"> </script>
<div class="row-fluid sortable ui-sortable">
                <div class="box span12">
                    <div data-original-title="" class="box-header">
                        <h2><i class="halflings-icon white edit"></i><span class="break"></span>商品添加</h2>
                        <div class="box-icon">
                            <a class="btn-setting" href="#"><i class="halflings-icon white wrench"></i></a>
                            <a class="btn-minimize" href="#"><i class="halflings-icon white chevron-up"></i></a>

                        </div>
                    </div>
                    <div class="box-content">
                     <!--  {:print_r($user)} -->
                        <form id="signupForm" enctype="multipart/form-data" class="form-horizontal" action="" method="post" >
                            <fieldset>

                              <div class="control-group">
                                    <label for="appendedInput" class="control-label">名称：</label>
                                    <div class="controls">
                                      <div class="input-append">
                                        <input type="text" size="16"  name="name">
                                      </div>

                                    </div>
                              </div>

                              <div class="control-group">
                                    <label for="appendedInput" class="control-label">市场价：</label>
                                    <div class="controls">
                                      <div class="input-append">
                                        <input type="text" size="16"   name = "goods_price">
                                      </div>

                                    </div>
                              </div>
                              <div class="control-group">
                                    <label for="appendedInput" class="control-label">促销价：</label>
                                    <div class="controls">
                                      <div class="input-append">
                                        <input type="text" size="16"  name="sale_price">
                                      </div>

                                    </div>
                              </div>
                              <div class="control-group">
                                    <label for="appendedInput" class="control-label">商品编号：</label>
                                    <div class="controls">
                                      <div class="input-append">
                                        <input type="text" size="16" id="tel" name="number">
                                      </div>

                                    </div>
                              </div>








                              <div class="control-group">
                                <label class="control-label">新品：</label>
                                <div class="controls">
                                      <label class="radio">
                                        <input type="radio"  value="1" id="optionsRadios1" name="is_new" required>是
                                      </label>

                                      <label class="radio">
                                        <input type="radio" value="0" id="optionsRadios2" name="is_new">否
                                      </label>
                                </div>
                              </div>

                              <div class="control-group">
                                <label class="control-label">热卖：</label>
                                <div class="controls">
                                      <label class="radio">
                                        <input type="radio"  value="1" id="optionsRadios1" name="is_hot" required>是
                                      </label>

                                      <label class="radio">
                                        <input type="radio" value="0" id="optionsRadios2" name="is_hot">否
                                      </label>
                                </div>
                              </div>

                              <div class="control-group">
                                <label class="control-label">上架：</label>
                                <div class="controls">
                                      <label class="radio">
                                        <input type="radio"  value="1" id="optionsRadios1" name="is_down" required>是
                                      </label>

                                      <label class="radio">
                                        <input type="radio" value="0" id="optionsRadios2" name="is_down">否
                                      </label>
                                </div>
                              </div>

                               <div class="control-group">
                                <label for="selectError" class="control-label">商品分类：</label>
                                <div class="controls">
                                  <select data-rel="chosen" id="selectError" style="" class="chzn-done" name="cate_id">
                                    <option value="0">请选择</option>
                                    <foreach name="cate" item="va" key="ka">
                                     <option value="{$va.id}" >{$va.name}</option>
                                    </foreach>
                                  </select>
                                </div>
                              </div>

                              <div class="control-group">
                                <label for="selectError" class="control-label">品牌：</label>
                                <div class="controls">
                                  <select data-rel="chosen" id="selectError" style="" class="chzn-done" name="brand_id">
                                    <option value="0">请选择</option>
                                    <foreach name="brand" item="vb" key="kb">
                                     <option value="{$vb.id}" >{$vb.name}</option>
                                    </foreach>
                                  </select>
                                </div>
                              </div>
                              <div class="control-group">
                                <label for="selectError" class="control-label">相册：</label>
                                <div class="controls">
                                  <select data-rel="chosen" id="selectError" style="" class="chzn-done" name="photo_id">
                                    <option value="0">请选择</option>
                                    <foreach name="photo" item="vp" key="kp">
                                     <option value="{$vp.id}" >{$vp.name}</option>
                                    </foreach>
                                  </select>
                                </div>
                              </div>
                              <div class="control-group">
                                <label for="selectError" class="control-label">类型：</label>
                                <div class="controls">
                                  <select data-rel="chosen" id="type" style="" class="chzn-done" name="type_id">
                                    <option value="0">请选择</option>
                                    <foreach name="type" item="vt" key="kt">
                                     <option value="{$vt.id}" >{$vt.name}</option>
                                    </foreach>
                                  </select>
                                </div>
                              </div>
                              <div class="control-group aa">
                                <label class="control-label" id='af'>商品规格：</label><br>

                              </div>






                              <div class="control-group">
                                <label class="control-label"></label>
                                <div class="controls">
                                       <!-- 引入百度编辑器 -->
                                    <script id="editor" type="text/plain" name="edit" style="width:1024px;height:500px;"></script>
                                </div>
                              </div>
                              <div class="control-group">
                                <label class="control-label">商品图片：</label>
                                <div class="controls">

                                  <div class="uploader">
                                      <input type="file" id='file' name='img'>
                                      <span class="filename" style="-moz-user-select: none;"></span>
                                      <span class="action" style="-moz-user-select: none;">选择图片</span>

                                  </div>
                                  <img id="img" width=60 height=60 src="" style="float:right;margin-right:1100px;" alt="">
                                </div>
                              </div>



                              <div class="form-actions">
                                <button class="btn btn-primary submit" type="submit">提交</button>

                              </div>
                            </fieldset>



                        </form>
                    </div>
                </div><!--/span-->

            </div>




</block>







<block name="js">


<script src="__PUBLIC__js/jquery.validate.min.js"></script>


<script type="text/javascript">

$(function(){

    // 初始化百度编辑器
    var ue = UE.getEditor('editor');


    //选择类型时，拼接出规格项
    $('#type').change(function(){
        //获取选中项的下标
        var selected = $(this).get(0).selectedIndex;
        // alert(selected);return;
        if(selected!=0){
          //优化，每改变一次就删除先前追加的div
          var id = $(this).val();
          $('#af').nextAll('div ').remove();
          //触发ajax把类型id传过去查询sql
         $.ajax({
              type:'get',
              url:"{:U('Ajax/getspec')}",
              data:{'id':id},
              success:function(e){
                //返回结果集
                var spec='';
                //循环拼接出规格和规格项
                for(i in e){
                  spec+='<div class="controls" id=sepc style="margin-top:10px;">';
                  spec+='<label class="control-label" style="margin-left:0px;text-align:left;width:80px;">'+e[i].name+':</label>';
                    for(j in e[i].goods_spec_attr){
                      spec+='<span class="btn btn-red"  style="width:70px;">'+e[i].goods_spec_attr[j].name+'</span>';
                      var desc = e[i].name+':'+e[i].goods_spec_attr[j].name;
                      spec+='<span class="btn btn-danger add" style="margin-left:0px;" spec_rule="'+e[i].goods_spec_attr[j].id+'" ms="'+desc+'">+</span>&nbsp';
                    }

                  spec+='</div>';


                }


                spec+='<div class="control-group ">';
                spec+='<label class="control-label" id="af">库存：</label>';
                spec+='<input type="text" class="kc" style="width:80px;margin-right:12px;" placeholder="请输入库存" >';

                spec+='</div>';
                spec+='<div class= "click"><button style="margin-left:28%;margin-top:30px;" class="btn btn-primary submit" type="button">规格录入</button></div>';
                //在#af后追加
                $('#af').after(spec);

                //给追加的html标签绑定点击事件
                $('.add').click(function(){

                    //拼接出input框
                    var html ='<input type="text" class="bb" style="width:80px;margin-right:12px;" placeholder="请输入价格" >' ;
                    //+ 变成-
                    var  icon=$(this).text();
                    if(icon=='+'){
                        //在追加前先删除所有input
                        $(this).parents('#sepc').find('input').remove();
                        $(this).parents('#sepc').find('.add').text('+');
                        $(this).text('-');
                        $(this).after(html);

                    }else{
                         $(this).text('+');
                        $(this).next('input').remove();
                    }


                  })

                  //点击规格录入按钮时，获取input框输入的数据
                    $('.click').click(function(){

                       var total = 0;//规格总价
                       var mss = '';//规格描述
                       var spec_id='';//规格规则

                        //抓取到添加的input框
                       var len =$('.aa').find('.bb');
                       //each循环抓取到的input累加总价
                       len.each(function(i,obj) {

                            total+=parseInt($(obj).val());
                       });


                       //获取描述信息，存在上一个标签的ms自定义属性中
                       var ms = $('.aa').find('input').prev('span');
                       ms.each(function(j, obk) {
                            mss+=$(obk).attr('ms')+' ';
                            spec_id +=$(obk).attr('spec_rule')+',';
                       });
                       spec_id=spec_id.slice(0,-1);

                      //获取库存数量
                       var kc = $('.kc').val();

                      $.ajax({
                            type:'post',
                            url:"{:U('Ajax/specinsert')}",
                            data:{
                                'spec_price':total,
                                'spec_rule':spec_id,
                                'num':kc,
                                'spec_desc':mss,
                            },
                            dataType:'json',

                            success:function(a){

                          //点击规格录入时显示表格
                           var table='';


                            table+='<div class="control-group cc">';
                            table+='<div class="box span6" style="margin-left:12%">';
                            table+='<div class="box-header">';
                            table+='<h2><i class="halflings-icon white align-justify"></i><span class="break"></span>规格：</h2>';
                            table+='<div class="box-icon">';
                            table+='<a href="#" class="btn-setting"><i class="halflings-icon white wrench"></i></a>';
                            table+='<a href="#" class="btn-minimize"><i class="halflings-icon white chevron-up"></i></a>';
                            table+='<a href="#" class="btn-close"><i class="halflings-icon white remove"></i></a>';
                            table+='</div>';
                            table+='</div>';
                            table+='<div class="box-content">';
                            table+='<table class="table table-bordered">';
                            table+='<thead>';
                            table+='<tr>';
                            table+='<th>规格规则</th>';
                            table+='<th>规格总价</th>';
                            table+='<th>库存</th>';
                            table+='<th>规格描述</th>';
                            table+='<th>操作</th>';
                            table+='</tr>';
                            table+='</thead>';
                            table+='<tbody>';

                            for(i in a){
                            table+='<tr>';
                            table+='<td>'+a[i].spec_rule+'</td>';
                            table+='<td>'+a[i].spec_price+'</td>';
                            table+='<td class="center">'+a[i].num+'</td>';
                            table+='<td class="center">'+a[i].spec_desc+'</td>';
                            table+='<td class="center">';
                            table+='<a class="btn btn-danger" href="#">';
                            table+='<i class="halflings-icon white trash"></i>';
                            table+='</a>';
                            table+='</td>';
                            table+='</tr>';
                            }
                            table+='</tbody>';
                            table+='</table>';
                            table+='</div>';
                            table+='</div>';
                            table+='</div>';

                            $('.aa').nextAll('.cc').remove();
                            //点击规格录入时，追加表格
                            $('.aa').after(table);
                            }
                      })





                    })


                }


            }) }
    })


  // 选择文件时动态显示图片在旁边
     function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }

    $('#file').change(function() {

        $('#img').attr('src', getObjectURL($(this)[0].files[0])); // 或 this.files[0] this->input

    });


//调用表单验证插件进行表单验证
      $('#signupForm').validate({

          debug:false,
          rules:{
              username:{
                  required:true,
                  rangelength:[2,10]
              },
              section:"required",

               tel:{
                  required:true,
                  digits:true,
                  rangelength:[11,11]
             },
              address:"required",
              password:{
                  required:true,
                  minlength:8
              },
              confirm_password:{
                  required:true,
                  minlength:8,
                  equalTo: "#password"
              },
              code:{
                  required:true,
                  rangelength:[6,6],
                  digits:true
              },

          },

          messages:{
               username:{
                  required:"请输入用户名",
                  rangelength:"用户名的长度在2-10之间"
              },
              section:"请输入所属部门",

              address:"请输入住址",
              tel:{
                  required:"请输入手机号码",
                  digits:"必须为整数",
                  rangelength:"手机号码长度为11位"

             },
              password:{
                  required:"请输入密码",
                  minlength:"密码的长度最少为8位"
              },
               confirm_password:{
                  required:"请确认密码",
                  minlength:"密码长度不少于8位",
                  equalTo: "两次密码不一致"

              },
               code:{
                  required:"请输入校验码",
                  rangelength:"校验码长度为6位整数",
                   digits:"校验码长度为6位整数"
              },
          },
          errorClass:'er',
      })


})




    </script>
</block>